@keyframes blink {
  from {
    opacity: 1;
  }

  40% {
    opacity: 1;
  }

  60% {
    opacity: 0;
  }

  to {
    opacity: 0;
  }
}

.markdown-message-md {
  min-height: 40px;
  // max-width: 420px;
  display: flex;
  align-items: center;
  flex: 1 1;
  overflow: hidden;
}

.tp-md {
  > *:last-child {
    // 这里应根据 props.mdSelector 动态处理
    position: relative;

    &::after {
      content: '';
      display: none; // 默认状态为不显示，实际使用时根据 props.state 处理
      height: 16px;
      width: 6px;
      margin: 0 2px;
      vertical-align: text-bottom;
      animation-duration: 1s;
      animation-name: blink;
      animation-iteration-count: infinite;
      background: rgb(0 0 0, 89%); // 默认背景色

      // 动态处理显示逻辑
      // 这里的 props.state 应该在实际使用时处理
      // 例如：
      // & when (props.state === AnswerState.Receiving) {
      //   display: inline-block;
      // }
    }
  }
}

.markdown-message-md-pop {
  display: inline-block;
  padding: 12px 16px;
  margin: auto 0;
  width: 100%;
  box-sizing: border-box;

  img {
    max-height: 100%;
    max-width: 100%;
  }
}

.chat-msg-md {
  max-width: 100%;

  & > *:first-child {
    margin-top: 0;
  }

  & > *:last-child {
    margin-bottom: 0;
  }
}

.chat-msg-md-content {
  color: #878c93;
}
